@keyframes text {
       0% {
           transform: scale(1);
       }

       100% {
           transform: scale(1.2);
       }
   }

   /* Box1 */
   .section1 {
       position: fixed;
       width: 100%;
       top: 0;
       left: 0;
       z-index: 0;
       height: auto;
       max-height: 100vh;
       padding: 0;
   }

   .bannerBox {
       position: relative;
       z-index: 2;
       overflow: hidden;
       width: 100%;
       height: 100%;
   }

   .bannerSwiper {
       position: relative;
       overflow: hidden;
       width: 100%;
       height: 100%;
   }

   .bannerSlide {
       overflow: hidden;
       width: 100%;
       height: 100%;
       position: relative;
       z-index: 2;
   }

   .bannerSlide .text {
       position: absolute;
       z-index: 9;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       padding: 0 var(--container);
       background: #00000000;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: flex-start;
   }

   .bannerSlide .text h1 {
       display: flex;
       flex-wrap: wrap;
   }

   .bannerSlide .text h1 span {
       display: flex;
       flex-wrap: wrap;
   }

   .bannerSlide .text h1 span b {
       font-weight: bold;
   }

   .bannerSlide .text h1 b {
       font-weight: 400;
       font-size: 60px;
       line-height: 1.5;
       color: #FFFFFF;
       display: flex;
       margin-right: 2px;
   }



   .bannerSlide .text .bannerMore {
       margin-top: 30px;
       background: var(--jb);
       border-radius: 50px;
       width: 300px;
       height: 80px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding-left: 50px;
       padding-right: 10px;
       color: #fff;
       font-size: 20px;
       transition: 0.5s
   }

   .bannerSlide .text .bannerMore:hover {
       padding-right: 5px;
   }

   .bannerSlide .text .bannerMore span {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 60px;
       height: 60px;
       background: #fff;
       border-radius: 50px;
   }


   .bannerSlide .bj {
       width: 100%;
       height: 100%;
       object-fit: cover;
       position: relative;
       z-index: 3;
       animation: text 20s linear infinite;
   }

   .bannerBox video {
       display: block;
       position: relative;
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   @media (max-width: 1440px) {
       .bannerSlide .text h1 b {
           font-size: 48px;
       }
   }

   @media (max-width: 1200px) {
       .section1 {
           margin-top: 60px;
       }

       .bannerSlide .text h1 b {
           font-size: 40px;
       }

       .bannerSlide .text .bannerMore {
           width: 280px;
           height: 70px;
           padding-left: 40px;
       }

       .bannerSlide .text .bannerMore span {
           width: 50px;
           height: 50px;
       }
   }

   @media (max-width: 720px) {
       .bannerSlide .text h1 b {
           font-size: 32px;
       }

       .bannerBox video {
           position: absolute;
           left: 0;
           top: 0;
           z-index: 4;
       }

   }

   @media (max-width: 500px) {
       .bannerSlide .text h1 b {
           font-size: 28px;
           margin-right: 0px;
       }

       .bannerSlide .text .bannerMore {
           width: 230px;
           height: 60px;
           padding-left: 30px;
           font-size: 16px;
       }

       .bannerSlide .text .bannerMore span {
           width: 40px;
           height: 40px;
       }

       .bannerSlide .text .bannerMore span img {
           width: 20px;
       }
   }

   .index_banner {
       position: relative;
       z-index: -2;
   }

   .index_banner img {
       width: 100%;
       height: 100%;
       max-height: 100vh;
   }

   @media (max-width: 1200px) {
       .index_banner {
           margin-top: 60px;
       }
   }